<template>
  <a-table
    row-key="id"
    :loading="loading"
    :pagination="pagination"
    :columns="cloneColumns"
    :data="data"
    :bordered="false"
    :size="size"
    @page-change="onPageChange"
  >
    <template #index="{ rowIndex }">
      {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
    </template>
    <template #sex="{ record }">
      {{ record.sex ? '男' : '女' }}
    </template>
    <template #status="{ record }">
      <span v-if="!record.status" class="circle"></span>
      <span v-else class="circle pass"></span>
      {{ record.status ? '上架' : '下架' }}
    </template>
    <template #operations="{ record }">
      <a-space>
        <a-button type="text" size="small" @click="$emit('view', record)">
          <template #icon>
            <icon-eye />
          </template>
          查看
        </a-button>
        <a-button type="text" size="small" @click="$emit('edit', record)">
          <template #icon>
            <icon-edit />
          </template>
          编辑
        </a-button>
        <a-button type="text" size="small" :status="record.status ? 'danger' : 'success'" @click="$emit('toggleStatus', record)">
          <template #icon>
            <icon-poweroff v-if="record.status" />
            <icon-play-arrow-fill v-else />
          </template>
          {{ record.status ? '下架' : '上架' }}
        </a-button>
        <a-button type="text" size="small" status="danger" @click="$emit('delete', record)">
          <template #icon>
            <icon-delete />
          </template>
          删除
        </a-button>
      </a-space>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import { GoodsRecord } from '@/api/goods'
import { Pagination } from '@/types/global'
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'

type SizeProps = 'mini' | 'small' | 'medium' | 'large'
type Column = TableColumnData & { checked?: true }

// 定义组件属性
const props = defineProps<{
  loading: boolean
  data: GoodsRecord[]
  pagination: Pagination
  cloneColumns: Column[]
  size: SizeProps
}>()

// 定义组件事件
const emit = defineEmits<{
  (e: 'pageChange', current: number): void
  (e: 'view', record: GoodsRecord): void
  (e: 'edit', record: GoodsRecord): void
  (e: 'toggleStatus', record: GoodsRecord): void
  (e: 'delete', record: GoodsRecord): void
}>()

// 处理页码变化
const onPageChange = (current: number) => {
  emit('pageChange', current)
}
</script>

<style scoped lang="less">
@import '../styles/common.less';

:deep(.arco-table-th) {
  &:last-child {
    .arco-table-th-item-title {
      margin-left: 16px;
    }
  }
}
</style>
